<template>
  <view class="fix-window" v-if="show">
    <top-window class="fix-window-top" />
    <view class="fix-window-button" @click="tiggerWindow"></view>
    <view v-show="visible" class="fix-window--mask" @click="tiggerWindow"></view>
    <left-window v-show="visible" class="fix-window--popup" />
  </view>
</template>

<script>
  import topWindow from '../../windows/topWindow.vue'
  import leftWindow from '../../windows/leftWindow.vue'
  export default {
    components: {
      topWindow,
      leftWindow
    },
    data() {
      return {
        visible: false
      };
    },
    computed: {
      show() {
        return uni.getSystemInfoSync().screenWidth <= 500
      }
    },
    methods: {
      tiggerWindow() {
        this.visible = !this.visible
      },
    }
  }
</script>

<style>
  .fix-window {}

  .fix-window-button {
    width: 30px;
    height: 30px;
    opacity: 0.5;
    position: fixed;
    top: 40px;
    left: 20px;
    z-index: 999;
  }

  .fix-window-top {
    width: 100%;
    position: fixed;
    /* top: 25px; */
    top: 0;
    left: 0;
    z-index: 999;
  }

  .fix-window--mask {
    position: fixed;
    bottom: 0px;
    top: 25px;
    left: 0px;
    right: 0px;
    background-color: rgba(0, 0, 0, 0.4);
    transition-duration: 0.3s;
    z-index: 997;
  }

  .fix-window--popup {
    position: fixed;
    /* top: 85px; */
    top: 60px;
    left: 0;
    /* transform: translate(-50%, -50%); */
    transition-duration: 0.3s;
    z-index: 998;
  }
</style>